/* 1,外围box, relative 相对定位 */
.appb-ui-rect {
	position: relative;
}

/* 2,外围box 前面加一个矩形，并由此确定母元素形状 */
.appb-ui-rect:before {
	content: "";
	display: block;
}

.appb-ui-rect:before,
.appb-ui-rect_h:before,
.appb-ui-rect_h100:before {
	padding-top: 100%; 	/* initial ratio of 1:x*/
}
.appb-ui-rect_h200:before {
	padding-top: 200%; 	/* initial ratio of 1:x*/
}
.appb-ui-rect_h150:before {
	padding-top: 150%; 	/* initial ratio of 1:x*/
}
.appb-ui-rect_h120:before {
	padding-top: 120%; 	/* initial ratio of 1:x*/
}
.appb-ui-rect_h80:before {
	padding-top: 80%; 	/* initial ratio of 1:x*/
}
.appb-ui-rect_h60:before {
	padding-top: 60%; 	/* initial ratio of 1:x*/
}
.appb-ui-rect_h50:before {
	padding-top: 50%; 	/* initial ratio of 1:x*/
}

/* 3, 里面子元素绝对定位，上下左右绝对位置都是0，
即撑满母元素的正方形 ，且 溢出部分隐藏掉 */
.appb-ui-rect  .appb-ui-rect-content {
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
  overflow: hidden;
}

/* 4,图片 设为正方形，且不变形 */
.appb-ui-rect .appb-ui-rect-content img {
  border: 0px solid #ddd;
  width:100%;
  height:100%;
  object-fit: cover;
}
